<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
  <link rel="shortcut icon" type="image/ico" href="favicon.ico" />
  <title>SlickGrid example 15: Grid Auto-Resize on Window Resize</title>
  <link rel="stylesheet" href="../slick.grid.css" type="text/css"/>
  <link rel="stylesheet" href="../css/smoothness/jquery-ui-1.11.3.custom.css" type="text/css"/>
  <link rel="stylesheet" href="examples.css" type="text/css"/>
</head>
<body onbeforeunload="destroyAutoResize()">
	<h2>Demonstrates:</h2>
		<ul>
			<li>Basic Grid with Auto-Resize on Window Resize</li>
		</ul>

		<h2>View Source:</h2>
		<ul>
			<li><A href="https://github.com/6pac/SlickGrid/blob/master/examples/example15-auto-resize.html" target="_sourcewindow"> View the source for this example on Github</a></li>
		</ul>

		<div id="gridContainer">
			<div id="myGrid" style="width:600px;height:500px;"></div>
		</div>

<script src="../lib/jquery-1.11.2.min.js"></script>
<script src="../lib/jquery.event.drag-2.3.0.js"></script>

<script src="../slick.core.js"></script>
<script src="../slick.grid.js"></script>

<script>
	var grid;
  var columns = [
    {id: "title", name: "Title", field: "title", minWidth: 100 },
    {id: "duration", name: "Duration", field: "duration", minWidth: 100 },
    {id: "%", name: "% Complete", field: "percentComplete", minWidth: 100 },
    {id: "start", name: "Start", field: "start", minWidth: 100 },
    {id: "finish", name: "Finish", field: "finish", minWidth: 100 },
    {id: "effort-driven", name: "Effort Driven", field: "effortDriven", minWidth: 100 }
  ];

  var options = {
    enableCellNavigation: true,
    enableColumnReorder: false,
		forceFitColumns: true,
  };

	// define some minimum height/width/padding before resizing
	var DATAGRID_MIN_HEIGHT = 180;
	var DATAGRID_MIN_WIDTH = 300;
	var DATAGRID_BOTTOM_PADDING = 20;

  /** Attach an auto resize trigger on the datagrid, if that is enable then it will resize itself to the available space
   * Options: we could also provide a % factor to resize on each height/width independently
   */
  function attachAutoResizeDataGrid(grid, gridId, gridContainerId) {
		var gridDomElm = $('#' + gridId);
		if (!gridDomElm || typeof gridDomElm.offset() === "undefined") {
			// if we can't find the grid to resize, return without attaching anything
			return null;
		}

		//-- 1st resize the datagrid size on first load (because the onResize is not triggered on first page load)
		resizeToFitBrowserWindow(grid, gridId, gridContainerId);

		//-- 2nd attach a trigger on the Window DOM element, so that it happens also when resizing after first load
		$(window).on("resize", function () {
			// for some yet unknown reason, calling the resize twice removes any stuttering/flickering when changing the height and makes it much smoother
			resizeToFitBrowserWindow(grid, gridId, gridContainerId);
			resizeToFitBrowserWindow(grid, gridId, gridContainerId);
		});

		// in a SPA (Single Page App) environment you SHOULD also call the destroyAutoResize()
  }

	/* destroy the resizer when user leaves the page */
	function destroyAutoResize() {
		$(window).trigger('resize').off('resize');
	}

	/**
	* Private function, calculate the datagrid new height/width from the available space, also consider that a % factor might be applied to calculation
	* object gridOptions
	*/
	function calculateGridNewDimensions(gridId, gridContainerId) {
		var availableHeight = $(window).height() - $('#' + gridId).offset().top - DATAGRID_BOTTOM_PADDING;
		var availableWidth = $('#' + gridContainerId).width();

		var newHeight = availableHeight;
		var newWidth = availableWidth;

		// we want to keep a minimum datagrid size, apply these minimum if required
		if (newHeight < DATAGRID_MIN_HEIGHT) {
			newHeight = DATAGRID_MIN_HEIGHT;
		}
		if (newWidth < DATAGRID_MIN_WIDTH) {
			newWidth = DATAGRID_MIN_WIDTH;
		}

		return {
			height: newHeight,
			width: newWidth
		};
	}

	/** resize the datagrid to fit the browser height & width */
	function resizeToFitBrowserWindow(grid, gridId, gridContainerId) {
		// calculate new available sizes but with minimum height of 220px
		var newSizes = calculateGridNewDimensions(gridId, gridContainerId);

		if (newSizes) {
			// apply these new height/width to the datagrid
			$('#' + gridId).height(newSizes.height);
			$('#' + gridId).width(newSizes.width);

			// resize the slickgrid canvas on all browser except some IE versions
			// exclude all IE below IE11
			if (new RegExp('MSIE [6-8]').exec(navigator.userAgent) === null && grid) {
				grid.resizeCanvas();
			}
		}
	}

  $(function () {
    var data = [];
    for (var i = 0; i < 500; i++) {
      data[i] = {
        title: "Task " + i,
        duration: "5 days",
        percentComplete: Math.round(Math.random() * 100),
        start: "01/01/2009",
        finish: "01/05/2009",
        effortDriven: (i % 5 == 0)
      };
    }

    grid = new Slick.Grid("#myGrid", data, columns, options);
		attachAutoResizeDataGrid(grid, "myGrid", "gridContainer");
	});
</script>
</body>
</html>